import React, { useState } from "react"
import classNames from "classnames"
import { Transition } from "../Transition"
import { Icon } from "../Icon/Icon"

export enum AlertType {
    Success = "success",
    Info = "info",
    Warning = "warning",
    Danger = "danger"
}

export interface BaseAlertProps  {
    className ?: string;
    // 警告提示内容	
    message : string;
    // 指定警告提示的样式
    type: AlertType;
    // 警告提示的辅助性文字介绍
    description ?: string;
    // 默认不显示关闭按钮
    closable ?: boolean;
    // 关闭的回调
    onClose?: ()=> void;
    // 自定义操作项
    action ?:  React.ReactElement;
    // 自定义关闭按钮
    closeText ?: React.ReactNode;
    // 自定义关闭 Icon
    closeIcon ?: React.ReactNode;
}

type AlertProps = BaseAlertProps & React.HTMLAttributes<HTMLDivElement>

export const Alert: React.FC<AlertProps> = (props) =>{
    const {
        message = "Alert",
        type = AlertType.Info,
        description,
        closable,
        className,
        onClose,
        action,
        closeIcon,
        closeText,
        ...restProps
    } = props
    const [visible, setVisible] = useState(true)
    const customCloseP = closeIcon || closeText || <Icon icon="times" className="window-close" size='lg' />
    const classes = classNames("wave-alert", className, {
        [`wave-alert-${type}`]: type,   
    })

    const handleClick = ()=>{
        setVisible(false)
        if(onClose){
            onClose()
        }
    }
    
    return (
        <Transition  in={visible} animation="zoom-in-left" timeout={300} wrapper={true}>
            <div
                className={classes}
                {...restProps}
            >
                <div className="wave-alert-content">
                    
                    <span>
                        {message}
                    </span>
                    <p>
                        {description}
                    </p>
                </div>

                {
                    closable && (
                        <i className="wave-alert-closable" onClick={handleClick}>{customCloseP}</i>
                    )
                }

                <div className="wave-alert-action">
                    {action}
                </div>

            </div>
        </Transition>
    )
    
}


